<style>
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .input-line-1 {
        height: 30px;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-channel-add" class="show_page_content">
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">用户名：</label>
            <input type="text " placeholder="请输入用户名" class="app_numx val" id="username" field="username" rexg="" msg="" rexIndex="">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">密码：</label>
            <input type="password" placeholder="请输入密码" class="app_num val" id="password" field="userpass" rexg="^(?=.*[a-z])|(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).{6,}$" msg="最少6位，大写小写字母数字或特殊字符" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">确认密码：</label>
            <input type="password" placeholder="请输入确认密码" class="app_num val" id="yespassword" field="c_userpass" rexg="^(?=.*[a-z])|(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).{6,}$" msg="最少6位，大写小写字母数字或特殊字符" rexIndex="1">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">邮箱：</label>
            <input type="text " placeholder="请输入邮箱" class="app_num val" id="email" field="email" rexg="^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$" msg="邮箱格式不正确" rexIndex="2">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">所属角色：</label>
            <select type="text " id="channel_name" class="val">
                    
                    <option value="1">渠道商</option>
                </select>
        </div>
    </div>
    <div class="layui-btn input-line-1" id="dhh-channel-add-btn" style="margin-top:20px;margin-bottom: 50px;margin-left:150px;"><i class="layui-icon layui-icon-add-circle-fine"></i>提交</div>

</div>
<script>
    var rex = [0, 0, 0];
    $(".app_num").on("blur", function() {
        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
            $(this).parent().next().html("");
            $(this).css("border", "solid 1px lightgray");
            rex[Number($(this).attr("rexIndex"))] = 0;
        } else {
            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
            $(this).css("border", "solid 1px indianred");
            rex[Number($(this).attr("rexIndex"))] = 1;
        }
    });
    $(".app_num").on("input", function() {
        $(this).parent().next().html("");
        $(this).css("border", "solid 1px lightgray");
        rex[Number($(this).attr("rexIndex"))] = 0;
    });
    $("#dhh-channel-add-btn").on("click", function() {
        if ($("#username").val() == "") {
            layer.msg("请输入用户名！", {
                icon: 0,
                time: 1500
            });
            return false;
        }
        if ($("#password").val() == "") {
            layer.msg("请输入密码！", {
                icon: 0,
                time: 1500
            });
            return false;
        }
        if ($("#yespassword").val() == "") {
            layer.msg("请输入确认密码！", {
                icon: 0,
                time: 1500
            });
            return false;
        }
        if ($("#password").val() != "" && $("#yespassword").val() != "" && $("#password").val() != $("#yespassword").val()) {
            $("#yespassword").parent().next().html("<span style='color:indianred'>确认密码错误！</span>");
            $("yespassword").parent().next().css("border", "solid 1px indianred");
            rex[Number($("yespassword").attr("rexIndex"))] = 1;
            return false;
        }
        if ($("#email").val() == "") {
            layer.msg("请输入邮件！", {
                icon: 0,
                time: 1500
            });
            return false;
        }
        if ($("#password").val() && $("#yespassword").val() && $("#email").val() && $("#username").val()) {
            var y = 0;
            for (var i = 0; i < rex.length; i++) {
                y += rex[i];
            }
            if (y == 0) {
                $.ajax({
                    url: "/distributors/add_action",
                    type: "post",
                    dataType: "json",
                    data: {
                        username: $("#username").val(),
                        userpass: $("#password").val(),
                        c_userpass: $("#yespassword").val(),
                        email: $("#email").val()
                    },
                    beforeSend: function() {
                        loadIndex = layer.load(0);
                    },
                    success: function(d) {
                        layer.close(loadIndex);
                        if (d.result == "1") {
                            $("#username").val("");
                            $("#password").val("");
                            $("#yespassword").val("");
                            $("#email").val("");
                            layer.msg("添加成功！", {
                                icon: 1,
                                time: 1500
                            })
                        } else {
                            layer.msg("添加失败！", {
                                icon: 2,
                                time: 1500
                            })
                        }
                    },
                    error: function() {

                        layer.close(loadIndex);
                        layer.msg("网络异常！", {
                            icon: 2,
                            time: 1500
                        })
                    }
                })
            }
        }
    });
</script>